<!-- 承修单位维修费分析 -->
<template>
	<a-card class="container">
		<template #title> 承修单位维修费分析</template>
		<template #extra>
			<a-button type="primary" class="mybtn" :icon="h(SearchOutlined)">查询</a-button>
			<a-button class="mybtn" :icon="h(RedoOutlined)">重置</a-button>
			<a-button class="mybtn" :icon="h(DownloadOutlined)">导出</a-button>
		</template>
		<a-form class="search-form" v-model="searchForm">
			<a-form-item label="维修时间： " name="time">
				<a-radio-group @change="timeChange" :size="size" v-model:value="searchForm.time" button-style="solid">
					<a-radio-button value="a">全部</a-radio-button>
					<a-radio-button value="b">近一年</a-radio-button>
					<a-radio-button value="c">本年</a-radio-button>
					<a-radio-button value="d">本月</a-radio-button>
					<a-radio-button value="e">本周</a-radio-button>
					<a-radio-button value="g">自定义日期</a-radio-button>
				</a-radio-group>
				<a-range-picker v-show="isShowSelfDay" style="margin-left: 8px" :size="size" />
			</a-form-item>
			<a-form-item label="维修类型" name="type">
				<a-select ref="bxly" v-model:value="searchForm.bxly" style="width: 300px;">
					<a-select-option value="xx">小修</a-select-option>
					<a-select-option value="lucy">大修</a-select-option>
				</a-select>
			</a-form-item>
		</a-form>

		<a-collapse v-model:activeKey="activeKey">
			<a-collapse-panel key="1" header="统计图表">
				<CxdwBxlEchart :xdata="xData" :ydata="yData" ytitle="费用（元）" />
			</a-collapse-panel>
			<a-collapse-panel key="2" header="统计表格">
				<a-table
					:dataSource="dataSource"
					:columns="columns"
					:rowSelection="{
						type: 'checkbox',
					}"
					:size="size"
					bordered
					:pagination="{
						position: ['bottomCenter'],
						current: 1,
						pageSize: 20,
						total: 200,
						showTotal: (total) => `共 ${total}条`,
					}"
					:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
				>
					<template #bodyCell="{ column }">
						<template v-if="column.key === 'operation'">
							<a-button type="link">查看</a-button>
						</template>
					</template>
				</a-table>
			</a-collapse-panel>
		</a-collapse>
	</a-card>
</template>
<script setup>
	import { onMounted, ref, reactive, h } from 'vue';
	import { SearchOutlined, RedoOutlined, DownloadOutlined } from '@ant-design/icons-vue';
	import CxdwBxlEchart from '../components/onebar-echart.vue';
	const size = ref('small');
	const activeKey = ref(['1', '2']);
	// ----------------------查询表单部分内容---------------------
	const isShowSelfDay = ref(false);
	const timeChange = function (e) {
		isShowSelfDay.value = e.target.value == 'g';
	};
	// 查询表单数据
	const searchForm = reactive({
		time: 'a',
		type: 'all',
		wgfy: '',
		bxly: '',
		bxrsf: '',
		states: 'a',
		pay: 'a',
		otherParamType: 'phone',
		otherParamVal: '',
	});

	// ----------------------列表相关部分---------------------
	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			key: 'index',
			name: 'index',
			fixed: 'left',
			width: '70px',
			align: 'center',
			customRender: (record) => `${record.index + 1}`,
		},
		{
			title: '维修项目',
			dataIndex: 'lsh',
		},
		{
			title: '已完成工单（次）',
			dataIndex: 'time',
		},
		{
			title: '维修费总额(元)',
			dataIndex: 'time',
		},
		{
			title: '已完成工单（次）',
			dataIndex: 'time',
		},
		{
			title: '维修费总额（元）',
			dataIndex: 'time',
		},
		{
			title: '有偿（次）',
			dataIndex: 'time',
		},
		{
			title: '维修费（元）',
			dataIndex: 'time',
		},
		{
			title: '维修费（元）',
			dataIndex: 'time',
		},
		{
			title: '详情',
		},
	];
	const dataSource = [
		{
			key: '1',
			lsh: '6216612050658569601',
			time: '100',
			type: '10',
			area: '20',
			sname: '30',
			phone: '20',
		},
		{
			key: '2',
			lsh: '6217179897987058239',
			time: '100',
			type: '10',
			area: '30',
			sname: '12',
			phone: '20',
		},
	];
	
	onMounted(() => {
		initEchart();
	});
	const xData = ref([]);
	const yData = ref([]);
	
	const initEchart = function () {
		xData.value = ['雁塔校区教学区', '长安校区学生区', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
		yData.value = [100, 138, 350, 173, 180, 150, 180, 230, 180, 150, 180, 230];
	};
</script>
<style lang="less" scoped>
	.container {
		width: 95%;
		margin: 8px auto;
		.search-ref {
			margin-left: 24px;
			width: 300px;
		}
		.mybtn {
			margin: 0 4px;
		}
		.search-form {
			border-bottom: 1px dotted #ccc;
			margin-bottom: 16px;
		}
		.items {
			display: flex;
			flex-direction: row;
			justify-content: center;
			.item {
				text-align: center;
				width: 11.1%;
				display: inline-block;
			}
		}
	}
	:deep(.ant-statistic-content-value-int) {
		color: '#1D2129';
		font-size: '22px';
		font-weight: 700;
	}
	:deep(.ant-statistic-title) {
		font-size: 12px;
		color: #1d2129;
	}
</style>
